<template>
  <div class="generate-resume">
    <div class="header">
      <h2>AI生成简历</h2>
      <p class="subtitle">描述您的背景和需求，AI将为您生成专业的简历内容</p>
    </div>

    <div class="content">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card class="input-card">
            <template #header>
              <h3>描述您的背景</h3>
            </template>
            
            <el-form :model="generateForm" label-width="100px" class="generate-form">
              <el-form-item label="职位目标">
                <el-input v-model="generateForm.targetPosition" placeholder="如：Java开发工程师" />
              </el-form-item>
              
              <el-form-item label="工作年限">
                <el-select v-model="generateForm.experience" placeholder="选择工作年限">
                  <el-option label="应届生" value="fresh" />
                  <el-option label="1-3年" value="1-3" />
                  <el-option label="3-5年" value="3-5" />
                  <el-option label="5-10年" value="5-10" />
                  <el-option label="10年以上" value="10+" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="技能标签">
                <el-input v-model="generateForm.skills" type="textarea" rows="3" 
                  placeholder="如：Java, Spring Boot, MySQL, Redis, 微服务架构..." />
              </el-form-item>
              
              <el-form-item label="教育背景">
                <el-input v-model="generateForm.education" 
                  placeholder="如：计算机科学与技术 本科" />
              </el-form-item>
              
              <el-form-item label="详细描述">
                <el-input v-model="generateForm.description" type="textarea" rows="6"
                  placeholder="详细描述您的工作经历、项目经验、技能特长等..." />
              </el-form-item>
              
              <el-form-item label="选择模板">
                <el-select v-model="generateForm.templateType" placeholder="选择模板风格">
                  <el-option label="现代简约" value="modern" />
                  <el-option label="经典专业" value="classic" />
                  <el-option label="创意设计" value="creative" />
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="generateResume" :loading="generating" size="large">
                  <el-icon><Magic /></el-icon>
                  生成简历
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="tips-card">
            <template #header>
              <h3>💡 生成提示</h3>
            </template>
            
            <div class="tips">
              <div class="tip-item">
                <h4>📝 职位目标</h4>
                <p>明确您想要申请的具体职位，这将帮助AI生成更精准的简历内容</p>
              </div>
              
              <div class="tip-item">
                <h4>🛠️ 技能标签</h4>
                <p>列出您掌握的技术栈、工具和技能，用逗号分隔</p>
              </div>
              
              <div class="tip-item">
                <h4>💼 工作经验</h4>
                <p>详细描述您的工作经历、负责的项目、取得的成果等</p>
              </div>
              
              <div class="tip-item">
                <h4>🎯 描述要点</h4>
                <ul>
                  <li>使用具体的数字和成果</li>
                  <li>突出核心技能和专长</li>
                  <li>提及重要的项目经验</li>
                  <li>包含相关的认证和奖项</li>
                </ul>
              </div>
            </div>
          </el-card>
          
          <el-card class="example-card" v-if="!generated">
            <template #header>
              <h3>📋 示例描述</h3>
            </template>
            
            <div class="example">
              <p><strong>职位：</strong>Java开发工程师</p>
              <p><strong>经验：</strong>3-5年</p>
              <p><strong>技能：</strong>Java, Spring Boot, MySQL, Redis, Docker, Kubernetes</p>
              <p><strong>描述：</strong></p>
              <p class="example-text">
                5年Java开发经验，熟练掌握Spring生态系统，具有大型分布式系统设计和开发能力。
                曾负责电商平台核心订单系统的架构设计，处理日均百万级订单，系统可用性达到99.9%。
                精通MySQL数据库优化，Redis缓存架构，Docker容器化部署。
                具有丰富的微服务架构经验，熟悉Dubbo、Spring Cloud等框架。
              </p>
            </div>
          </el-card>
          
          <!-- 生成结果预览 -->
          <el-card class="result-card" v-if="generated">
            <template #header>
              <div class="result-header">
                <h3>🎉 生成成功</h3>
                <div class="actions">
                  <el-button @click="regenerate">重新生成</el-button>
                  <el-button type="primary" @click="saveAndEdit">保存并编辑</el-button>
                </div>
              </div>
            </template>
            
            <div class="generated-content">
              <p>简历已生成完成！您可以保存并进入编辑页面进行进一步的定制。</p>
              <div class="preview-info">
                <p><strong>标题：</strong>{{ generatedResume.title }}</p>
                <p><strong>模板：</strong>{{ getTemplateName(generatedResume.templateType) }}</p>
                <p><strong>生成时间：</strong>{{ generatedResume.createdTime }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { generateResume as generateResumeApi } from '@/api/resume'

const router = useRouter()

const generating = ref(false)
const generated = ref(false)

const generateForm = reactive({
  targetPosition: '',
  experience: '',
  skills: '',
  education: '',
  description: '',
  templateType: 'modern'
})

const generatedResume = ref({})

const generateResume = async () => {
  if (!generateForm.targetPosition || !generateForm.description) {
    ElMessage.error('请填写职位目标和详细描述')
    return
  }
  
  generating.value = true
  try {
    // 调用AI生成API
    const response = await generateResumeApi(generateForm)
    
    generatedResume.value = {
      id: response.id,
      title: response.title || `${generateForm.targetPosition}简历`,
      templateType: response.templateType || generateForm.templateType,
      createdTime: new Date().toLocaleString()
    }
    
    generated.value = true
    ElMessage.success('简历生成成功！')
  } catch (error) {
    console.error('生成失败:', error)
    // API错误信息已经在request拦截器中处理
  } finally {
    generating.value = false
  }
}

const regenerate = () => {
  generated.value = false
  generatedResume.value = {}
}

const saveAndEdit = () => {
  ElMessage.success('正在跳转到编辑页面...')
  router.push(`/resumes/${generatedResume.value.id}/edit`)
}

const getTemplateName = (type) => {
  const templates = {
    modern: '现代简约',
    classic: '经典专业',
    creative: '创意设计'
  }
  return templates[type] || type
}
</script>

<style scoped>
.generate-resume {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.input-card,
.tips-card,
.example-card,
.result-card {
  margin-bottom: 20px;
}

.generate-form .el-form-item {
  margin-bottom: 20px;
}

.tips {
  color: #666;
}

.tip-item {
  margin-bottom: 25px;
}

.tip-item h4 {
  margin: 0 0 8px 0;
  color: #409eff;
  font-size: 16px;
}

.tip-item p {
  margin: 0;
  line-height: 1.6;
}

.tip-item ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.tip-item li {
  margin-bottom: 4px;
}

.example {
  color: #666;
}

.example p {
  margin: 0 0 10px 0;
}

.example-text {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  line-height: 1.6;
  border-left: 4px solid #409eff;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-header h3 {
  margin: 0;
}

.actions {
  display: flex;
  gap: 10px;
}

.generated-content {
  color: #666;
}

.preview-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
}

.preview-info p {
  margin: 0 0 8px 0;
}

.preview-info p:last-child {
  margin-bottom: 0;
}
</style> 